Transcrição
Nosso sistema de rotas funciona de acordo com o esperado, o que pode ser confirmado se digitarmos o endereço localhost:4200/user/flavio na barra de navegação. Isto fará com que a página contendo a lista de imagens seja carregada. Do mesmo modo, se digitarmos localhost:4200/p/add, o photo-form será carregado. Mas e se colocarmos um endereço que não existe?
Nada será exibido, e se consultarmos o console, haverá um erro indicando que não há nenhuma rota que se relacione com o endereço digitado. Podemos melhorar isso, e uma solução é incluir uma terceira rota em routes de app.routing.module.ts que, ao ser carregada, para qualquer endereço que não sejam estas duas opções, carregará PhotoListComponent:
const routes: Routes = [
{ path: 'user/flavio', component: PhotoListComponent },
{ path: 'p/add', component: PhotoFormComponent },
{ path: '""', component: PhotoListComponent }
];No entanto, não queremos utilizar esta abordagem. Queremos exibir ao usuário uma página indicando que o endereço digitado não existe, ou não foi encontrado. A questão é: onde estará esta página não encontrada? No módulo da pasta "photos", ou em app.module.ts?
Nenhum dos dois. Como esta questão não possui relação direta com "photos", e também não queremos importá-lo em app.module.ts, a ideia é que ele contenha apenas as importações dos módulos que a aplicação realmente precisa utilizar. Criaremos, então, um módulo chamado "errors" diretamente na pasta "app".
Faremos isso pausando o Angular no terminal, e utilizando o comando ng generate module errors. Automaticamente, uma subpasta em "app" será criada, dentro da qual será criado o módulo, além do arquivo errors.module.ts, com o importe de CommonModule.
Então, vamos criar o componente not-found, voltando ao terminal e digitando ng generate component errors/not-found. Ele será criado em "app > errors", sendo o primeiro erro que teremos. Qualquer outro tipo de erro, como acesso não autorizado ou algo assim, também será criado ali. Além disso, foi declarado NotFoundComponent no array de declarations automaticamente.
Em not-found.component.ts há sua estrutura básica, com implementação do OnInit e tudo o mais. Em not-found.component.html, substituiremos todo o conteúdo por:
<div class="text-center">
<h2>This page is not avaliable</h2>
<p>
The link you have acccessed may be broken or
the page may have ben removed.
</p>
</div>Trata-se de um texto estático que indica que a página não foi encontrada. Utilizamos a classe text-center do Bootstrap para que a estrutura (ou seja, o subtítulo e o parágrafo) fique centralizada. Salvaremos o arquivo, e com isto o componente estará pronto, possuindo apenas um template, uma apresentação. Agora, basta incluí-lo em nossa rota.
Em app.routing.module.ts, onde está PhotoListComponent no último path, colocaremos NotFoundComponent. Salvaremos e testaremos seu funcionamento retornando ao terminal, subindo novamente o Angular CLI por meio do comando ng serve --open. O ambiente de desenvolvimento será construído, após o qual o navegador será aberto.
Ocorre um erro já visto anteriormente, indicando que NotFoundComponent não faz parte de NgModule, sendo que, em realidade, isto não é verdade. Em nosso projeto, ele faz parte de errors.module.ts e, se consultarmos app.module.ts, em nenhum momento ErrorsModule está sendo carregado. Assim sendo, o componente da rota, NotFoundComponent, não estará disponível na aplicação, então faz sentido o console informar que o que estamos tentando usar em app.routing.module.ts não pertence ao módulo, pois este módulo do qual ele faz parte não foi carregado.
Para resolvermos isto, em app.module.ts faremos a importação de ErrorsModule:
imports: [
BrowserModule,
PhotosModule,
AppRoutingModule,
ErrorsModule
]Assim, o Angular saberá que este componente pertence ao módulo, e tudo funcionará bem. Desta vez, ao abrirmos o navegador, se testarmos uma página inexistente, será exibida a mensagem "This page is not available" ("Esta página está indisponível").